<template>
	<view>
		<view class="fixed">
			<cu-custom bgColor="text-white" :isBack="false">
				<block slot="content">首页</block>
			</cu-custom>
		</view>
		<!-- 轮播图 -->
		<swiper v-if="carousel.length!=0" class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
		 duration="500">
			<swiper-item v-for="(item, index) in carouselList" :key="index" :class="carouselCur==index?'cur':''" @tap="toDetail(item.url)">
				<image :src="item.img" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!-- 博客列表 -->
		<scroll-view scroll-y scroll-with-animation enable-back-to-top>
			<block v-for="(item, index) in itemList" :key="index">
				<article-card :item='item'></article-card>
			</block>
		</scroll-view>
		<uni-load-more v-if="itemList.length > 0" iconType="auto" :status="status" />
	</view>
</template>

<script>
	import autoLogin from '@/common/autoLogin.js'
	import * as carousel from '@/api/blog/carousel.js'
	import * as article from '@/api/blog/article/article.js'
	export default {
		mixins: [autoLogin],
		data() {
			return {
				status: 'init',
				carouselCur: 0,
				carouselList: [],
				pages: 1,
				pageNumber: 1,
				itemList: []
			}
		},
		onLoad() {
			if (this.$tools.isLogin()) {
				this.loadData()
			} else {
				this.uniLogin().then(res => {
					if (res) {
						this.loadData()
					} else {
						uni.reLaunch({
							url:'/pages/login/login'
						})
					}
				})
			}
		},
		onReachBottom() {
			// 上拉加载下一页
			if (this.status === 'more') {
				this.search(this.pageNumber + 1)
			}
		},
		onShareAppMessage(res) {
			return {
				title: '用心分享关于程序猿的故事。',
				path: '/pages/index/index'
			}
		},
		onShareTimeline() {
			return {
				title: '用心分享关于程序猿的故事。',
				path: '/pages/index/index'
			}
		},
		methods: {
			async loadData() {
				// 轮播图
				this.carouselList = await carousel.getList().then(res => {
					let data = []
					if (res.code === 1) {
						data = res.data || []
					}
					return data
				});
				const res = await article.getPage({
					pageNumber: this.pageNumber
				}).then(res => {
					return res
				})
				if (res.code === 1) {
					const data = res.data
					this.pages = data.pages
					if (this.pages == 0) {
						this.status = 'noData'
					} else {
						this.itemList = this.itemList.concat(data.rows)
						if (this.pages <= this.pageNumber) {
							this.status = 'noMore'
						} else {
							this.status = 'more'
						}
					}
				}
			},
			search(pageNumber) {
				this.status = 'loading'
				this.pageNumber = pageNumber
				article.getPage({
					pageNumber: this.pageNumber
				}).then(res => {
					if (res.code === 1) {
						const data = res.data
						this.pages = data.pages
						if (this.pages == 0) {
							this.status = 'noData'
						} else {
							this.itemList = this.itemList.concat(data.rows)
							if (this.pages <= this.pageNumber) {
								this.status = 'noMore'
							} else {
								this.status = 'more'
							}
						}
					}
				})
			},
			carouselSwiper(e) {
				this.carouselCur = e.detail.current
			},
			toDetail(url){
				if (url) {
					thi.$tools.go(url)
				}
			}
		}
	}
</script>

<style>
	.fixed {
		position: fixed;
		z-index: 99;
	}
</style>
